import * as maptalks from 'maptalks'
import { HeatLayer } from 'maptalks.heatmap'
import { showInfo } from './info/info.js'
import eventBus from '@/utils/bus'
/**
 * 地图管理
 * @param dom 地图绑定的dom id
 * @constructor
 */
export function Map(dom) {
  this.dom = dom // dom 节点id
  this.center = [117.120098, 36.6512] // 地图中心
  this.zoom = 8 // 地图缩放级别
  this.api = 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}' // 地图地址
  this.map = '' // 地图数据
  this.info = '' // 地图弹出框

  this.initMap() // 初始化地图
}

/**
 * 初始化地图
 */
Map.prototype.initMap = function() {
  const { center, zoom, api, dom } = this
  this.map = new maptalks.Map(dom, {
    center: center,
    zoom: zoom,
    minZoom: 5,
    maxZoom: 15,
    baseLayer: new maptalks.TileLayer('base', {
      urlTemplate: api,
      subdomains: ['a', 'b', 'c', 'd'],
      cssFilter: 'sepia(90%) invert(90%)'
    })
  })
  var extent = this.map.getExtent()
  this.map.setMaxExtent(extent)
}
/**
 * 新增地图图层
 */
Map.prototype.addLayer = function(name) {
  this.map.removeLayer(name)
  return new Promise(resolve => {
    const layer = new maptalks.VectorLayer(name)
    layer.addTo(this.map)
    resolve(layer)
  })
}
/**
 * 添加GeoJson
 */
Map.prototype.addArea = function(layer, geoJson, symbol) {
  symbol = symbol || {
    'polygonFill': 'rgb(12,17,37)',
    'lineColor': 'rgb(255,255,255,.5)',
    'lineWidth': 2,
    'polygonOpacity': 0.6
  }
  const areas = maptalks.GeoJSON.toGeometry(geoJson.features)
  areas.forEach((item, index) => {
    item.updateSymbol(symbol)
    item.setId(item.properties.adcode + '---' + item.properties.name)
    const label = new maptalks.Label(item.properties.name, item.properties.center,
      {
        // 'draggable' : true,
        'textSymbol': {
          'textFill': '#34495e',
          'textHaloRadius': 3,
          'textSize': 16
        }
      })
    mouseEvent(this.map, item, symbol)
    item.addTo(layer)
    label.addTo(layer)
  })
}
/**
 * 新增不规则区域
 */
Map.prototype.addGrid = function(layer, gridData, symbol) {
  symbol = symbol || {
    'polygonFill': 'transparent',
    'lineColor': 'rgb(84,112,198)',
    'lineWidth': 1,
    'polygonOpacity': 1
  }
  const multiPolygon = new maptalks.Polygon(gridData.coordinates, {
    visible: true,
    editable: false,
    cursor: 'pointer',
    draggable: false,
    symbol: symbol,
    id: gridData.code + '-id-' + gridData.name
  })
  mouseEvent(this.map, multiPolygon, symbol)
  multiPolygon.addTo(layer)
}
/**
 * 新增热力图层
 */
Map.prototype.addHeat = function(data) {
  console.log(data)
  this.map.removeLayer('heat')
  const heatLayer = new HeatLayer('heat', data).addTo(this.map)
  heatLayer.config({
    'radius': 10,
    'blur': 20,
    'gradient': { 0.1: 'blue', 0.6: 'cyan', 0.7: 'lime', 0.8: 'yellow', 1.0: 'red' }
  })
}
/**
 * 移除图层
 */
Map.prototype.removeLayer = function(layerNmae) {
  this.map.removeLayer(layerNmae)
}
/**
 * 移除弹框图层
 */
Map.prototype.removeInfo = function() {
  this.map.info?.remove()
}
/**
 * 鼠标事件监听
 */
function mouseEvent(map, target, symbol) {
  let color = ''
  let opacity = ''
  target.on('mouseenter', (e) => {
    color = e.target.getSymbol()?.polygonFill
    opacity = e.target.getSymbol()?.polygonOpacity
    e.target.updateSymbol({
      'polygonFill': 'rgb(13,157,220)',
      'polygonOpacity': 1
    })
  })
  target.on('mouseout', function(e) {
    e.target.updateSymbol({
      'polygonFill': color,
      'polygonOpacity': opacity
    })
  })
  target.on('click', (e) => {
    const info = e.target.getId()
    console.log(info)
    eventBus.$emit('clickMap', info)
    const infoComponent = showInfo(e, map, info)
    map.info = infoComponent
  })
}
